<fly:block name="show_indicator"><div id="menu_indicator"></div></fly:block>
<fly:block name="indicator">
	<div id="menu_indicator">
		<ul>
			<li class="li_current_root">
				<a href="<fly:variable name='language_folder'/>/"><fly:translate name='text_home'/></a><fly:modify name="text_home" />&nbsp;<fly:block name='bar1'>&gt;&nbsp;</fly:block>	
			</li>
			<fly:list name="list_page">
				<li class="li_current_root" >
					<a href="<fly:variable name='language_folder'/>/<fly:variable name='url_page' />" title="<fly:variable name='title_page' />"> <fly:variable name="nom_page" /></a>&nbsp;
					<fly:block name='bar'>&gt;&nbsp;</fly:block>	
				</li>
			</fly:list>
			<li class="li_current">
				&gt;&nbsp;<fly:variable name="page_current" />
			</li>
		</ul>
	</div>
</fly:block>
<div id="content_body" class="content_body<fly:variable name="page_class" />">
<div class="main-title">	
	<fly:translate name='text_title_map'/><fly:modify name="text_title_map" />
</div>
<div id="content_body_map">
<div id="map_search">
	<p>
		<select name="language_link" id="language_link">
				<option value="0" disabled="disabled" selected="selected"><fly:translate name="text_please_select"/></option>
			<fly:list name="listCategory">
				<option <fly:variable name="selected" /> value="<fly:variable name='language_link' />"><fly:variable name="title" /></option>
			</fly:list>
		</select><fly:modify name="text_please_select" />
	</p>
	<div id="seperate-list-google-map">
		<ul>
			<fly:list name="listGoogleMap1">
				<li><fly:variable name="index1" />. <a href="javascript:void(0)" id="<fly:variable name='language_link1' />" title="<fly:variable name='title1' />" onclick="javascript:click_sidebar(<fly:variable name='index1' />);"><fly:variable name="name_place1" /></a></li>
			</fly:list>
		</ul>
	</div>
	<div id="seperate-list-google-map">
		<ul>
			<fly:list name="listGoogleMap2">
				<li><fly:variable name="index2" />. <a href="javascript:void(0)" id="<fly:variable name='language_link2' />" title="<fly:variable name='title2' />" onclick="javascript:click_sidebar(<fly:variable name='index2' />);"><fly:variable name="name_place2" /></a></li>
			</fly:list>
		</ul>
	</div>
	<div id="seperate-list-google-map">
		<ul>
			<fly:list name="listGoogleMap3">
				<li><fly:variable name="index3" />. <a href="javascript:void(0)" id="<fly:variable name='language_link3' />" title="<fly:variable name='title3' />" onclick="javascript:click_sidebar(<fly:variable name='index3' />);"><fly:variable name="name_place3" /></a></li>
			</fly:list>
		</ul>
	</div>
</div>
<div class="clear"></div>
<div id="map_canvas" style="width: 650px; height: 443px"></div>
</div><br /><br /><br />
<fly:list name="listGoogleMapJavascript_html">
<div id="map_place_html_<fly:variable name='index' />" class="hide">
    <div id='detail_map'><table cellspacing='5' ><tr><fly:variable name='url_image' /><td valign='top' ><b><fly:variable name="name_place" /></b><br /><fly:variable name="address" /><fly:block name="block_email"><br /><fly:variable name="email" /></fly:block><fly:block name="block_website"><br /><fly:variable name='text_website' /><a href= <fly:variable name='website' /> target='_blank' > <fly:variable name='website' /></a></fly:block></td></tr><tr><td colspan='2' width='200px' ><fly:variable name='link_detail' /></td></tr></table></div><br /><br />
</div>
</fly:list>
<div class="blank_height_20"></div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		initialize();
		GUnload();
		$("#language_link").change(function(){
			submitForms();
		});
	});

	var points = [];
	var markers = [];
	var marker_html = [];
	var map = null;
	
	function initialize() {
      if (GBrowserIsCompatible()) {
      
        // Create and Center a Map
        map = new GMap2(document.getElementById("map_canvas"));
       //map.setCenter(new GLatLng(11.558831,104.91745), 14);
        map.setCenter(new GLatLng(<fly:variable name='latitude_map' />,<fly:variable name='longitude_map' />), <fly:variable name='zome_level' />);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        <fly:list name="listGoogleMapJavascript">
			var point = new GLatLng(<fly:variable name="latitude" />, <fly:variable name="longitude" />);
			
            var html = $('#map_place_html_'+<fly:variable name='index' />).html();
                        
            var marker = createMarker(point, html);
            points[<fly:variable name='index' />]= point;
            markers[<fly:variable name='index' />]= marker;
            marker_html[<fly:variable name='index' />] = html;
            map.addOverlay(marker);
		</fly:list>
		
        // bind a search control to the map, suppress result list
        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
        
      }
     var id = window.location.href.replace(/.*click_id=(\d+)/, '$1');
	 if(id) { $('#'+id).focus(); $('#'+id).click(); }
    }
    
    GSearch.setOnLoadCallback(initialize);

	function createMarker(point, html) {
      var marker = new GMarker(point, customIcons["default"]);
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    
    function click_sidebar(idx) {
    	markers[idx].openInfoWindowHtml(marker_html[idx]);
    }
    
    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["default"] = iconRed;
    
 	function submitForms(){
 		var link = $("#language_link").val();
 		if (link == 0) {
 		
 		}
		else {			
			window.location.href = "<fly:variable name='language_folder'/>/map.php?type="+link ;
			return true;
		}
	
	}  
</script>